<template>
  <div style="height: 100%">
    <div class="ds-box2 ds-box-hover" @click="vectorAllShow()">
      <div style="width: 5%"></div>
      <div class="ds-grow">
        <span class="data-name">{{ data }}</span>
      </div>
    </div>
    <div class="ds-hr2"></div>

    <div v-for="(item, index) in classifyList" :key="index">
      <div
        :class="item.select ? 'ds-box-selected' : ''"
        class="ds-box2 ds-box-hover"
        @click="vectorClassifyShow(item, !item.select)"
      >
        <div style="width: 5%"></div>
        <div class="ds-grow">
          <span class="data-name">{{ item.name }}</span>
        </div>
        <span
          @click.stop="
            {
              item.itemsShow = !item.itemsShow;
            }
          "
          >{{ item.itemsShow ? "↓" : "→" }}</span
        >
      </div>
      <div class="ds-hr2"></div>

      <div v-show="item.itemsShow" v-for="item2 in item.items" :key="item2">
        <div
          :class="dataList[item2].select ? 'ds-box-selected' : ''"
          class="ds-box2 ds-box-hover bj-text-center"
          @click="vectorShow(item2, !dataList[item2].select, true)"
        >
          <div style="width: 5%"></div>
          <div class="ds-grow">
            <span class="data-name">{{ item2 }}</span>
          </div>
          <span @click.stop="detailsShow(item2)">&equiv;</span>
        </div>
        <div class="ds-hr2"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer } from "ol/layer";
import { Style, Fill, Stroke, Text } from "ol/style";
import { transform } from "ol/proj";
import GeoJSON from "ol/format/GeoJSON";
let url = "http://localhost:8080/upload/";
//let url = "http://www.mikoyang.cn/upload/";
export default {
  props: ["map", "load"], //地图组件传值
  components: {},
  data() {
    return {
      data: "图层显示",
      dataList: {},
      classifyList: [],
      classifyDto: {},
      //示例数据
      // dataList: {
      //   重庆机场: { layer: null, select: true },
      // },
      // classifyList: [
      //   {
      //     name: "机场",
      //     select: true,
      //     itemsShow: false,
      //     items: ["重庆机场", "大足机场", "双流机场", "成都机场"],
      //   },
      //   {
      //     name: "河滩",
      //     select: true,
      //     itemsShow: false,
      //     items: ["重庆河滩", "大足河滩", "双流河滩", "成都河滩"],
      //   },
      //   {
      //     name: "河流",
      //     select: true,
      //     itemsShow: false,
      //     items: ["重庆河流", "大足河流", "双流河流", "成都河流"],
      //   },
      //   {
      //     name: "桥梁",
      //     select: true,
      //     itemsShow: false,
      //     items: ["重庆桥梁", "大足桥梁", "双流桥梁", "成都桥梁"],
      //   },
      // ],
      // classifyDto: {
      //   河流: {
      //     name: "河流",
      //     select: true,
      //     itemsShow: false,
      //     items: ["重庆长江"],
      //   },
      // },
    };
  },
  watch: {
    load() {
      // console.log(this.load);
      if (this.load) {
        this.$nextTick(function () {
          //this.vectorLoad(1);
          this.fileNameload();
        });
      }
    },
  },
  mounted() {
    this.$emit("selectV", this.data);
  },
  methods: {
    fileNameload() {
      let _this = this;
      this.$http
        .get("list")
        .then((res) => {
          let data = res.data.split(",");
          _this.vectorLoad(data, 0);
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    vectorLoad(data, index) {
      //2022/4/2
      //先通过axios进行请求,如果成功说明文件存在,再通过openlayers本身的方法进行请求渲染加载,相当于axios作用为嗅探请求
      //这个方法不是很好,后续有方案可以改进
      let _this = this;
      //console.log(data[index] +"")
      this.$http
        .get(data[index] + "")
        .then((res) => {
          //console.log(res.data);
          if (res.data == 404) {
            for (let i in _this.classifyDto) {
              _this.classifyList.push(_this.classifyDto[i]);
            }
            return;
          } else {
            let name = res.data.features[0].properties.name;
            let classify = res.data.features[0].properties.classify;
            let details = res.data.features[0].properties.details;
            let centroid = res.data.features[0].properties.centroid;
            _this.mapload(data[index], name, classify, details, centroid, res.data);
            //回调
            //2022/4/24过时的
            _this.vectorLoad(data, index + 1);
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    mapload(index, name, classify, details, centroid, json) {
      let style = new Style({
        stroke: new Stroke(),
        fill: new Fill(),
        text: new Text(),
      });
      console.log(url + index + "?a=" + Math.ceil(Math.random() * 10))
      let geoJson = new VectorLayer({
        title: index,
        source: new VectorSource({
          projection: "EPSG:4326",
          url: url + index + "?a=" + Math.ceil(Math.random() * 10), //GeoJSON的文件路径，用户可以根据需求而改变
          format: new GeoJSON(),
        }),
        style: function (feature) {
          //console.log(feature);
          const stroke = feature.get("stroke") || "rgba(255,125,0,0.6)";
          const fill = feature.get("fill") || "rgba(255,125,0,0.1)";
          const width = feature.get("width") || 2;
          const name = feature.get("name") || "";
          // console.log(stroke);
          // console.log(fill);
          style.getFill().setColor(fill);
          style.getStroke().setColor(stroke);
          style.getStroke().setWidth(width);

          style.getText().setText(name);
          style.getText().setFont("20px bold serif");
          style.getText().getFill().setColor("#fff");
          style.getText().setStroke(
            new Stroke({
              color: "#000",
              width: 1.2,
            })
          );
          return style;
        },
      });

      this.map.addLayer(geoJson);
      this.dataList[name] = {
        layer: geoJson,
        select: true,
        details: details,
        centroid: centroid,
        json: json,
      };

      if (this.classifyDto[classify] == undefined)
        this.classifyDto[classify] = {
          name: classify,
          select: true,
          itemsShow: false,
          items: [name],
        };
      else this.classifyDto[classify].items.push(name);
      //console.log(this.classifyDto[classify]);
    },

    vectorAllShow() {
      if (this.data == "图层显示") {
        this.data = "图层隐藏";

        for (let i = 0; i < this.classifyList.length; i++)
          this.vectorClassifyShow(this.classifyList[i], false);
      } else {
        this.data = "图层显示";
        for (let i = 0; i < this.classifyList.length; i++)
          this.vectorClassifyShow(this.classifyList[i], true);
      }
      this.$emit("selectV", this.data);
    },
    vectorClassifyShow(item, bool = true) {
      item.select = bool;
      for (let i = 0; i < item.items.length; i++) {
        this.vectorShow(item.items[i], item.select);
      }
    },
    vectorShow(item, bool = true, go = false) {
      this.dataList[item].select = bool;
      this.dataList[item].layer.setVisible(bool);
      //2022/4/11 用于解决class样式不刷新问题
      this.$forceUpdate();
      if (go) {
        var center = transform(
          this.dataList[item].centroid,
          "EPSG:4326",
          "EPSG:3857"
        );
        this.map.getView().setCenter(center);
      }
    },
    detailsShow(item) {
      this.$emit(
        "detailsShow",
        item,
        this.dataList[item].details,
        this.dataList[item].json
      );
    },
  },
};
</script>
<style scoped></style>
